<template>
    <div>
        <community-nav :navs="tabs" :activeItem.sync="activeTabIndex"></community-nav>
        <scroll-swiper :navs="tabs" v-model="activeTabIndex" :hideNav="true" id="community-g-flex-box">
            <mescroll
                v-for="(tab, index) in tabs"
                :upAuto="!tab.hasInit && index === activeTabIndex"
                @init="init"
                @loadMore="loadMore"
                :key="index"
                :slot="index"
                wrapperId="community-g-flex-box"
            >
                {{ tab.title }}
                <components v-for="(itemData, index) in tab.data" :is="tab.component" :content="itemData" :key="index">
                </components>
            </mescroll>
        </scroll-swiper>
        <bottom-menu></bottom-menu>
    </div>
</template>

<script>
import BottomMenu from 'components/bottom-menu/bottom-menu';
import ScrollSwiper from 'components/scroll-swiper/scroll-swiper';
import Mescroll from 'components/mescroll/mescroll';
import CommunityNav from './components/community-nav';
import CommunityItem from './components/community-item';
import 'mescroll.js/mescroll.min.css';
import { communityApi } from 'api';

export default {
    name: 'DuoduocaiH5Community',
    components: { BottomMenu, CommunityNav, ScrollSwiper, Mescroll, CommunityItem },
    data() {
        return {
            activeTabIndex: 0,
            tabs: [
                {
                    id: '1',
                    title: '关注',
                    requestParams: {},
                    fetch: communityApi.list.bind(communityApi),
                    hasInit: false,
                    component: CommunityItem,
                    data: [],
                },
                {
                    id: '2',
                    title: '心情',
                    requestParams: {},
                    fetch: communityApi.list.bind(communityApi),
                    hasInit: false,
                    component: CommunityItem,
                    data: [],
                },
                {
                    id: '3',
                    title: '幸运时票',
                    requestParams: {},
                    fetch: communityApi.list.bind(communityApi),
                    hasInit: false,
                    component: CommunityItem,
                    data: [],
                },
            ],
        };
    },

    computed: {
        currentTab() {
            return this.tabs[this.activeTabIndex];
        },
    },
    mounted() {
        // this.init(() => {});
    },

    methods: {
        async fetchFun(cb) {
            const { fetch, requestParams } = this.currentTab;
            try {
                let ret = await fetch(requestParams);
                console.log('🚀 ~ file: community.vue ~ line 75 ~ fetchFun ~ ret', ret);
                let _data = ret.data.list;
                let _total = ret.data.total;

                this.currentTab.data = this.currentTab.data.concat(_data);
                console.log(_total, this.currentTab.data.length);
                cb(_total > this.currentTab.data.length);
            } catch (error) {
                console.log('🚀 ~ file: community.vue ~ line 77 ~ fetchFun ~ error', error);
            }
        },
        init(cb) {
            setTimeout(() => {
                console.log('下拉刷新');
                this.currentTab.data = [];
                this.currentTab.hasInit = true;
                this.fetchFun((args) => {
                    cb(args);
                });
            }, 1000);
        },
        loadMore(cb = () => {}) {
            setTimeout(() => {
                console.log('加载更多');
                this.fetchFun(cb);
            }, 1000);
        },
    },
};
</script>

<style lang="scss" scoped></style>
